<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: '/user/userInfo',
            success: function(body) {
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = '玩家: ' + body.username + " 分数: " + body.score 
                    + "<br> 比赛场次: " + body.totalCount + " 获胜场数: " + body.winCount
            },
            error: function() {
                alert("获取用户信息失败!");
            }
        });

        //初始化websocket
        let websocket = new WebSocket("ws://127.0.0.1:8080/findMatch");
        websocket.onopen = function() {
            console.log("连接成功");
        }

        websocket.onerror = function(){
            console.log("连接异常");
        }

        websocket.onclose = function(){
            console.log("连接关闭");
            
        }
        window.onbeforeunload = function(){
            websocket.close();
        }
        let button = document.querySelector("#match-button");
        //接收到的信息
        websocket.onmessage = function(e) {
            let result = JSON.parse(e.data);
            if(!result.ok){
                console.log("游戏大厅发生错误：" + result.message);
                location.assign("/login.html");
            }
            if(result.message == 'startMatch'){
                button.innerHTML = '(匹配中)...点击停止';
            }else if(result.message == 'stopMatch'){
                button.innerHTML = '开始匹配';
            }else if(result.message == 'matchSuccess'){
                location.assign("/game_room.html");
            }else if(result.message == 'repeatConnection'){
                console.log("当前用户已登录");
                alert("当前用户已登录");
                location.assign("/login.html");
            }else{
                console.log("非法响应: " + result.message);
            }
        }

        //处理点击事件
       
        button.onclick = function(){
            if(websocket.readyState == websocket.OPEN){
                if(button.innerHTML == '开始匹配'){
                    console.log("开始匹配");
                    websocket.send(JSON.stringify({
                        message: 'startMatch',
                    }));
                }else if(button.innerHTML == '(匹配中)...点击停止'){
                    console.log("停止匹配");
                    websocket.send(JSON.stringify({
                        message: 'stopMatch',
                    }));
                }
            }else{
                alert("连接已断开");
                location.assign("/login.html");
            }
        }

    </script>
</body>
</html>